/** 
  实习生设置 
*/
<template>
  <div>
      <condition-card @reset="resetSearch" @search="onSearch" label-position="right" label-width="150px">
        <el-row :gutter="24" style="height: 50px;">
          <el-col :span="8">
            <el-form-item :label="$t('graduate.semester')">
              <CalendarSelect v-model="useConfigParam" @load-done="loadDone" @input='changeInput'></CalendarSelect>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('graduate.trainingLevel')">
              <el-select collapse-tags v-model="queryForm.condition.trainingLevelList" clearable multiple style="width: 100%">
                  <el-option
                      v-for="item in options.TrainingLevel"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item :label="$t('graduate.trainingClasse')">
                <DictSelect 
                  clearable
                  :plzSelect="$t('internship.pleaseSelect')"
                  multiple 
                  v-model="queryForm.condition.trainingTypeList"
                  :data="options.trainingCategory"
                   style="width: 100%">
                </DictSelect>
                  <!-- <el-select v-model="queryForm.condition.status" clearable style="width: 100%">
                      <el-option
                          v-for="item in options.auditStatus"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select> -->
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item :label="$t('graduate.learnType')">
                  <el-select collapse-tags v-model="queryForm.condition.degreeTypeList" multiple style="width: 100%">
                      <el-option
                          v-for="item in options.degreeType"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item :label="$t('graduate.formsLearn')">
                  <el-select collapse-tags v-model="queryForm.condition.learnFormList" multiple clearable style="width: 100%">
                      <el-option
                          v-for="item in options.formLearning"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item :label="$t('graduate.college')">
                  <el-select collapse-tags v-model="queryForm.condition.collegeAcademyList" @change="collegeChange" multiple filterable clearable style="width: 100%">
                      <el-option
                          v-for="item in options.faculty"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item :label="$t('graduate.major')">
                  <el-select collapse-tags v-model="queryForm.condition.majorList" multiple filterable clearable style="width: 100%">
                      <el-option
                          v-for="item in options.profession"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code">
                      </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
        </el-row>
      </condition-card>
      <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
        <h1 class="condition-title">{{$t('graduate.internshipList')}}</h1>
        <!-- <div class="float-left associated-conditional-input">
            <KeywordInput
              v-model="queryForm.condition.course"
              :placeholder="$t('graduate.queryMsg')"
              @enter="onSubmit"/>
        </div> -->
        <div class="edu-opertion-bar sub-title">
          <div class="float-right" style="display: flex;">
            <el-button type="primary" @click="exportAdd">{{$t('graduate.add')}}</el-button>
            <!-- <el-button type="danger" @click="allDelOutline">{{$t('graduate.allDelete')}}</el-button> -->
          </div>
        </div>
        <edu-table :pagination="false" :selection='false' :order='false' :tooltipEffect="tooltipEffect" stripe :data="dataList" size="mini" @selection-change="handleSelectionChange">
          <edu-table-column :label="$t('graduate.grade')" prop="calendarName"></edu-table-column>
          <edu-table-column :label="$t('graduate.trainingLevel')" prop="trainingLevelStr"></edu-table-column>
          <edu-table-column :label="$t('graduate.trainingClasse')" prop="trainingTypeStr"></edu-table-column>
          <edu-table-column :label="$t('graduate.learnType')" prop="degreeTypeStr"></edu-table-column>
          <edu-table-column :label="$t('graduate.formsLearn')" prop="learnFormStr"></edu-table-column>
          <edu-table-column :label="$t('graduate.college')" prop="collegeAcademyStr"></edu-table-column>
          <edu-table-column :label="$t('graduate.major')" prop="majorStr"></edu-table-column>
          <edu-table-column :label="$t('graduate.startTime')" prop="signStart" width='150px'></edu-table-column>
          <edu-table-column :label="$t('graduate.endTime')" prop="signEnd" width='150px'></edu-table-column>
          <edu-table-column :label="$t('graduate.scheduleFrequency')" prop="submitFrequency" width='150px'></edu-table-column>
          <!-- <edu-table-column :label="$t('graduate.auditStatus')">
            <template slot-scope="props">
              <span v-if="props.row.status == 0">待提交</span>
              <span v-if="props.row.status == 1">待审核</span>
              <span v-if="props.row.status == 2">审核通过</span>
              <span v-if="props.row.status == 3">驳回</span>
              <span v-if="props.row.status == null">待录入</span>
            </template>
          </edu-table-column> -->
          <edu-table-column :label="$t('graduate.operate')" fit width="150">
            <template slot-scope="props">
              <!-- <el-button type="text" @click="inputOutline(props.row)" v-if="props.row.status == null || props.row.status == 2">{{$t('graduate.graduate')}}</el-button> -->
              <el-button type="text" @click="editOutline(props.row)" >{{$t('graduate.edit')}}</el-button>
              <el-button type="text" @click="detailsOutline(props.row)" >{{$t('graduate.details')}}</el-button>
              <el-button type="text" @click="deteOutline(props.row)" >{{$t('internship.dete')}}</el-button>
              <!-- <el-button type="text" @click="copyOutline(props.row)" v-if="props.row.status == null || props.row.status == 2">{{$t('graduate.copy')}}</el-button>
              <el-button type="text" @click="checkOutline(props.row)" v-if="props.row.status == 1 || props.row.status == 2" >{{$t('graduate.check')}}</el-button> -->
            </template>
          </edu-table-column>
        </edu-table>
        <el-row type="flex" class="row-bg" justify="end">
          <el-col>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryForm.pageNum_"
                :page-sizes="[20, 40, 80, 100]"
                :page-size="queryForm.pageSize_"
                layout="total, sizes, prev, pager, next, jumper"
                :total="queryForm.total_"
                style="float:right;margin-top:10px"
              ></el-pagination>
          </el-col>
        </el-row>
      </el-card>
      <el-dialog
        @close="dataListProp={}"
        :title="title"
        width="60%"
        :before-close='beforeClose'
        :visible.sync="addflag"
        :show-close="false">
        <add-addDialog ref='addform' :dataList='loadList' @cancel-dialog='addCancel' :dataProp='dataProp' :dataListProp='dataListProp'  @clearadd-people='(val) => { dataListProp = Object.assign({}, val); }'
          @affirm-form="addrmForm" :showFlag="addflag" ></add-addDialog>
      </el-dialog>
    
  </div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import addDialog from 'common/src/views/graduateStudent/component/addDialog.vue';
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent';
export default {
  components: {
    "add-addDialog": addDialog
  },
  data () {
    return {
      indexKey: '1', // 面包屑
      title: '',
      addflag: false,
      useConfigParam: '',
      useConfigParamList: '',
      peopleadd: {},
      curRow: {},
      ifDetials: false,
      copyDialog: false,
      curCalendarId: '',
      isAllDel: true,
      multipleSelection: [],
      provideData: {}, // 提供子组件表格数据
      queryForm: {
        pageNum_: 1,
        pageSize_: 20,
        total_: 0,
        condition:{
          calendarName: '',
          trainingLevelList: [], // 培养层次
          trainingTypeLisy: [], // 培养类别
          degreeTypeList: [], // 学位类型
          collegeAcademyList: [], // 学院
          majorList: [], // 专业
          learnFormList: [] // 学习形式
        }
      },
      dataListProp: {},
      dataProp: '',
      copyTime: {
        time: ''
      },
      options: {
        TrainingLevel: [],
        degreeType: [],
        formLearning: [],
        faculty: [],
        profession: [],
        trainingCategory: []
      },
      calendarName: '',
      loadList: [],
      rules: {
        time: [
          {
            required: true,
            message: this.$t('graduate.optionRequired'),
            trigger: "change"
          }
        ]
      },
      dataList: [],
      breadPath: {
        label: this.$t('graduate.graduate'),
        key: "1",
        children: [
          {
            key: "2",
            label: ""
          }
        ]
      },
    }
  },
  created() {
    this.getOptions();
    
  },
  mounted() {
    // this.$nextTick(() => {
    //   // this.loadDone();
    //   // this.queryForm.condition.calendarName = '';
    //   this.postInternshipSet(this.queryForm);
    // });
  },
  methods: {
    getOptions() {
      // 筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ["X_PYCC", 'X_PYLB', 'X_XWLX', 'X_XXXS', 'X_YX']
      };
      queryDic(data).then(res => {
        UTILS.fillSelect(
          {
            trainingCategory: "X_PYLB",
            degreeType: "X_XWLX",
            formLearning: "X_XXXS",
            faculty: "X_YX",
            TrainingLevel: "X_PYCC"
          },
          res.data,
          this.options
        );
      });
    },
    // 学院选择
    collegeChange(val) {
      // this.options.profession = [];
      // <el-tag :type=" props.row.customizeReason == 1 ? 'success' : 'danger'" >{{props.row.customizeReason == 1 ? $t('abnormal.configed') : $t('abnormal.unConfiged')}}</el-tag>
      this.queryForm.majorList = [];
      if (val.length > 0) {

        let collegeList = val;
        graduateStudent.getDegreeByCollege(collegeList).then(res => {
          this.options.profession = res.data;
        });
      } else {
        this.options.profession = [];
      }
      // this.options["profession"] = [];
      //   const data = {
      //       lang: this.$store.getters.language || "cn",
      //       // type: "allChild",
      //       keys: ["G_ZY"],
      //       filter: {
      //           prefix: val,
      //           specilaCode: "XY2ZY"
      //       }
      //   };
      //   queryDic(data).then(res => {
      //       if (res.code === 200) this._fill("profession", res.data.G_ZY);
      //   });
    },
    _fill(type, data) {
      for (const key in data) {
        this.options[type].push({
            value: key,
            label: data[key]
        });
      }
    },
    // 获取列表
    postInternshipSet(data) {
      graduateStudent.internshipSettings(data).then(res => {
        // console.log(res, 'fdf');
        this.dataList = res.data.list;
        // this.queryForm.pageNum_ = res.data.pageNum_;
        // this.queryForm.pageSize_ = res.data.pageSize_;
        this.queryForm.total_ = res.data.total_;
        
      });
    },
    // 筛选
    onSearch() {
      this.queryForm.pageNum_ = 1;
      this.loadList.forEach(el => {
        if (el.id === this.useConfigParam) {
          this.queryForm.condition.calendarName = el.fullName;
        }
      });
      this.postInternshipSet(this.queryForm);
    },
    // 重置
    resetSearch() {
      // this.useConfigParamList = this.useConfigParam;
      this.useConfigParam = this.useConfigParamList;
      this.queryForm.condition.calendarName = this.calendarName;
      this.queryForm.condition.trainingLevelList = []; // 培养层次
      this.queryForm.condition.trainingTypeList = []; // 培养类别
      this.queryForm.condition.degreeTypeList = []; // 学位类型
      this.queryForm.condition.collegeAcademyList = []; // 学院
      this.queryForm.condition.majorList = []; // 专业
      this.queryForm.condition.learnFormList = []; // 学习形式
      this.options.profession = [];
      this.queryForm.pageNum_ = 1;
      // this.loadList.forEach(el => {
      //   if (el.id === this.queryForm.condition.calendarName) {
      //     this.queryForm.condition.calendarName = el.fullName;
      //   }
      // });
      this.postInternshipSet(this.queryForm);
      // this.postInternshipSet(this.queryForm);
    },
    // 新增
    exportAdd() {
      this.title = this.$t('graduate.add');
      this.dataProp = '新增';
      this.addflag = true;
    },
    // 取消
    addCancel(data) {
      this.addflag = data;
    },
    // 取消
    beforeClose(param) {
      this.$refs.addform.cancelDialog();
    },
    // 新增
    addrmForm(data) {
      // console.log(data, 'ddg112');
      this.addflag = false;
      // postInternshipSetAdd(data) {
      if (this.dataProp === '新增') {

        graduateStudent.internshipSetAdd(data).then(res => {
          this.$message.success(this.$t('internship.successfully'));
          this.queryForm.pageNum_ = 1;
          this.postInternshipSet(this.queryForm);
          // this.$refs.addform.cancelDialog();
        });
      } else if (this.dataProp === '编辑') {

        graduateStudent.internshipSetUpdate(data).then(res => {
          this.$message.success(this.$t('internship.successfully'));
          this.queryForm.pageNum_ = 1;
          this.postInternshipSet(this.queryForm);
          // this.$refs.addform.cancelDialog();
        });
      }
    // },
      
    },
    getListData() {
      // undergraduategraduateApi.getgraduateList(this.queryForm).then((res) => {
      //   this.dataList = res.data.list;
      //   this.queryForm.total_ = res.data.total_;
      // })
    },
    loadDone(data, val) {
      this.loadList = data;
      this.loadList.forEach(el => {
        if (el.id === val) {
          this.queryForm.condition.calendarName = el.fullName;
          this.calendarName = el.fullName;
          this.useConfigParamList = val;
        }
      });
      this.postInternshipSet(this.queryForm);
    },
    changeInput(val) {
      this.loadList.forEach(el => {
        if (el.id === val) {
          this.queryForm.condition.calendarName = el.fullName;
        }
      });
    },
    initOptions() {
      innovativeApi.getAllFaculty().then(res => {
        this.options.facultys = res.data.map(item => {
          return {
            label: item.deptName,
            value: item.deptCode
          }
        });
      })
    },
    // async getCurrentTermCalendar(){
    //   return await SchoolCalendarApi.currentTermCalendar();
    // },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.multipleSelection.every((item) => {
        if (item.status == 0 || item.status == 3) {
          return this.isAllDel = true;
        } else {
          this.isAllDel = false;
        }
      })
    },
    
    // 编辑
    editOutline(row) {
      // 编辑 子组件获取父组件数据
      graduateStudent.getDetailInternship(row.id).then((res) => {
        this.title = this.$t('graduate.edit');
        this.dataProp = '编辑';
        this.dataListProp = res.data;
        this.addflag = true;
        
      });
    },
    // 删除
    deteOutline(row) {
      this.$confirm(this.$t('internship.deleteDate'), this.$t('internship.systemPrompt'), {
          confirmButtonText: this.$t('graduate.define'),
          cancelButtonText: this.$t('graduate.cancel'),
          type: 'warning'
        }).then(() => {
          let list = [];
          list.push(row.id);
          graduateStudent.getDeleteById(list).then(res => {
            this.$message({
              type: 'success',
              message: this.$t('internship.successfully')
            });
            this.queryForm.pageNum_ = 1;
            this.postInternshipSet(this.queryForm);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('internship.cancelOpera')
          });          
        });
    },
    // 详情
    detailsOutline(row) {
      graduateStudent.getDetailInternship(row.id).then((res) => {
        this.title = this.$t('graduate.details');
        this.dataProp = '详情';
        this.dataListProp = res.data;
        this.addflag = true;
      });
      
    },
    // 查看
    checkOutline(row) {
      // undergraduategraduateApi.getTemplateById(row.id).then((res) => {
      //   this.provideData = res.data;
      //   this.indexKey = '2';
      //   this.breadPath.children[0].label = this.$t('graduate.check');
      //   this.ifDetials = true;
      //   this.$router.push({query:{row, flag: '3'}});
      // })
    },
    
    // 点击复制弹框确定
    diaSubmit() {
      this.$refs['copyTime'].validate(value => {
        if (value) {
          // undergraduategraduateApi.getTemplateById(copyTime.time).then((res) => {
          //   this.provideData = res.data;
          //   this.indexKey = '2';
          //   this.breadPath.children[0].label = this.$t('graduate.copy');
          //   this.ifEdit = true;
          //   this.$router.push({query:{row: this.curRow, flag: '4'}});
          //   this.diaCancel();
          // })
        }
      })
    },
    dialogClose() {
      this.copyDialog = false;
      this.$refs['copyTime'].resetFields();
    },
    
    handleSizeChange(val) {
      this.queryForm.pageNum_ = 1;
      this.queryForm.pageSize_ = val;
      this.postInternshipSet(this.queryForm);
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum_ = val;
      this.postInternshipSet(this.queryForm);
    },
    reset() {
      for (const key in this.queryForm.condition) {
        if (key != 'calendarId') {
          this.queryForm.condition[key] = "";
        }
      }
      this.queryForm.condition.faculty = '';
      this.queryForm.condition.status = '';
      this.queryForm.pageNum_ = 1;
      this.postInternshipSet(this.queryForm);
      // this.queryForm.condition.calendarId = this.curCalendarId;
      // this.onSubmit();
    },
  }
  
}
</script>
<style lang="scss" scoped>
.condition-title {
  color: #2b3b4e;
  font-size: 18px;
  line-height: 24px;
  font-weight: bold;
}
  .edu-page-title {
    span {
      line-height: 24px;
      display: inline-block;
      padding-right: 10px;
      font-size: 18px;
      font-weight: bold;
      color: #2b3b4e;
    }
  }
  .sub-title {
    margin: 16px 0;
    font-size: 16px;
    color: #000020;
    letter-spacing: 0;
  }
  .form-item {
    width: 312px;
    height: 32px;
    float: left;
    margin: 0px 10px;
  }
  .inputBox{
    width: 240px!important;height: 32px!important;
  }
  .atooltip{
    background: beige;
    border: black;
  }
</style>
